<!Doctype html>
<html>
<head>
    <title>ECharts 地图数据在线生成工具</title>
    <meta charset="utf-8" />

    <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?4bad1df23f079e0d12bdbef5e65b072f";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
    </script>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" href="lib/highlight/styles/atelier-dune.light.css">
</head>

<body>
    <div class="container-fluid navbar-default">
        <div class="navbar-header">
            <button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="http://echarts.baidu.com/index.html" class="navbar-brand"><img src="http://echarts.baidu.com/images/logo.png" alt="echarts logo" class="navbar-logo"/></a>
        </div>
        <div id="navbar-collapse" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-left">
                <li id="nav-index"><a href="http://echarts.baidu.com/index.html">首页</a></li>
                <li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://echarts.baidu.com/feature.html">特性</a></li>
                        <li><a href="http://echarts.baidu.com/tutorial.html">教程</a></li>
                        <li><a href="http://echarts.baidu.com/api.html">API</a></li>
                        <li><a href="http://echarts.baidu.com/option.html">配置项手册</a></li>
                        <li><a href="http://echarts.baidu.com/option-gl.html">GL 配置项手册</a></li>
                        <li><a href="http://echarts.baidu.com/faq.html">常见问题</a></li>
                        <li><a href="http://echarts.baidu.com/changelog.html">版本记录</a></li>
                    </ul>
                </li>
                <li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://echarts.baidu.com/download.html">下载</a></li>
                        <li><a href="http://echarts.baidu.com/download-extension.html">扩展下载</a></li>
                        <li><a href="http://echarts.baidu.com/download-theme.html">主题下载</a></li>
                        <li><a href="http://echarts.baidu.com/download-map.html">地图下载</a></li>
                    </ul>
                </li>
                <li id="nav-examples">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle">实例<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://echarts.baidu.com/examples.html">官方实例</a></li>
                        <li><a href="http://gallery.echartsjs.com/explore.html#tags=echarts-gl">GL 实例</a></li>
                    </ul>
                </li>
                <li id="nav-community"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://gallery.echartsjs.com">GALLERY</a></li>
                        <li><a href="http://efe.baidu.com/tags/ECharts/">博客</a></li>
                    </ul>
                </li>
                <li id="nav-tool" class="active"><a href="#" data-toggle="dropdown" class="dropdown-toggle">工具<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://echarts.baidu.com/spreadsheet.html">表格工具</a></li>
                        <li><a href="http://ecomfe.github.io/echarts-map-tool/">地图数据在线工具</a></li>
                        <li><a href="http://echarts.baidu.com/theme-builder/">主题构建工具</a></li>
                    </ul>
                </li>
                <li id="nav-about"><a href="#" data-toggle="dropdown" class="dropdown-toggle">关于<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://echarts.baidu.com/about.html">关于我们</a></li>
                        <li><a href="https://github.com/ecomfe/echarts/blob/master/LICENSE">版权声明</a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li id="nav-github"><a href="https://github.com/ecomfe/echarts" target="_blank"><img src="http://echarts.baidu.com/images/github.png" width="18"/></a></li>
                <li id="nav-2" class="0"><a href="http://echarts.baidu.com/echarts2/">2.0</a></li>
                <li id="nav-homeen"><a href="https://ecomfe.github.io/echarts-doc/public/en/index.html">EN</a></li>
            </ul>
        </div>
    </div><!-- end of navbar -->
    <div class="container" id="main">
        <h1>ECharts 地图数据在线生成工具</h1>
        <div style="text-align: left; min-height: 300px; margin-top: 30px; margin-left: 0; padding-left: 0" class="page-content container">
            <p style="padding-left: 0">ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。</p>
            <p style="padding-left: 0">建议大家使用以百度地图为底图的形式，参考实例：<a href="http://echarts.baidu.com/demo.html#map-polygon">http://echarts.baidu.com/demo.html#map-polygon</a></p>
        </div>
        <!--div class="row">
            <div id="configuration" class="col-sm-8">
                <section id="range">
                    <h3>范围<span>  range</span></h3>
                    <p>
                        <label for="province">省:</label>
                        <select id='province'></select>
                    </p>

                    <p>
                        <label for="province">市:</label>
                        <select id='city'><option>--  所有城市  --</option></select>
                    </p>

                    <p>
                        <label for="province">县:</label>
                        <select id='district'><option>--  所有区县  --</option></select>
                    </p>
                </section>
                <section id="type">
                    <h3>是否包含子区域<span>  subregion</span></h3>
                    <p>
                        <input type="radio" name="type" value="outline" id="outline" checked="checked">
                        <label for="outline">否</label>
                        <p class="desc">地图数据仅包括所选区域的外围轮廓</p>
                    </p>
                    <p>
                        <input type="radio" name="type" value="outlineAndPartition" id="outlineAndPartition">
                        <label for="outlineAndPartition">是</label>
                        <p class="desc">地图数据包括所选区域的外围轮廓, 以及内部子区域轮廓
                            <span class="desc-warning">(对于 "区县" 粒度的区域, 默认仅生成外轮廓)</span>
                        </p>

                    </p>
                </section>

                <section id="compress">
                    <h3>是否压缩<span>  compress</span></h3>
                    <p>
                        <input type="checkbox" name="compress" value="isCompressed" id="isCompressed" checked>
                        <label for="isCompressed">压缩版本</label>
                        <p class="desc">压缩后体积占用更小, 地图精度不变, 但是只能使用 UTF-8 编码</p>
                    </p>

                </section>

                <section id="compress">
                    <h3>地图名称<span>  name</span></h3>
                    <p>
                        <input id="mapName" class="form-control" value="beijing">
                    </p>

                </section>

                <section id="example">
                    <h3>使用示例<span>  example</span></h3>
                    <pre>
                        <code class="javascript">
    // JS
    var chart = echarts.init(document.getElementById('map'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'beijing'
        }]
    });

    // JSON
    $.getJSON('./beijing.json', function (data) {
        echarts.registerMap('beijing', data);
        var chart = echarts.init(document.getElementById('map'));
        chart.setOption({
            series: [{
                type: 'map',
                map: 'beijing'
            }]
        });
    });
                    </code>
                </pre>
                </section>
                <div id="action">
                    <button id="buildJs" class="btn btn-primary">生成 JS</button>
                    <button id="buildJson" class="btn btn-primary">生成 JSON</button>
                </div>
            </div>
            <div class="col-sm-4">
                <section id="preview">
                    <h3>预览<span> preview</span></h3>
                    <div id="preview-viewport"></div>
                </section>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=9d4f5c2078ba12cb9d9d09c4e81c95d0"></script>
    <script src="lib/jquery.js"></script>
    <script src="lib/bootstrap.min.js"></script>
    <script src='lib/FileSaver.min.js'></script>
    <script src="lib/echarts.js"></script>
    <script src="js/download.js"></script>
    <script src="lib/highlight/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
    <script>

    // -- 初始化全局变量 --

    // 地图接口对象
    var mapObj;

    // DistrictSearch对象
    var district;

    // 区县所在城市的城市编码, 用于搜索重名区域时确定具体区县
    var citycode;

    // 保存文件的名称
    var fileStr = '';

    // -- 初始化:直辖市,行政区 --

    var CENTRAL_CITIES = ['北京市市辖区','上海市市辖区','天津市市辖区','重庆市市辖区'];
    var AOMEN_AND_HK = ['香港特别行政区', '澳门特别行政区'];
    var TAIWAN = ['台湾省'];
    var NO_COUNTY = ['东莞市', '中山市', '三沙市', '儋州市', '嘉峪关市'];

    // 是否是直辖市
    var isCentralCity = false;

    // 是否是香港澳门
    var isAomenOrHK = false;

    // 是否是台湾
    var isTaiwan = false;

    var centralCity = [
        {
            name: '北京市市辖区',
            code: '010'
        },
        {
            name: '天津市市辖区',
            code: '022'
        },
        {
            name: '上海市市辖区',
            code: '021'
        },
        {
            name: '重庆市市辖区',
            code: '023'
        },
        {
            name: '香港特别行政区',
            code: '1852'
        },
        {
            name: '澳门特别行政区',
            code: '1853'
        },
        {
            name: '台湾省',
            code: '710000'
        }
    ];


    // -- 初始化下拉列表 --

    var INIT_PROVINCE_CONTENT = '<option>--  所有省(行政区,直辖市)  --</option>';
    var INIT_CITY_CONTENT = '<option>--  所有城市  --</option>';
    var INIT_DISTRICT_CONTENT = '<option>--  所有区县  --</option>';
    var INIT_DEFAULT_CONTENT = '<option>--  全部  --</option>';

    var provinceList = ['河北省', '山西省', '内蒙古自治区', '辽宁省', '吉林省','黑龙江省',  '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省','河南省', '湖北省', '湖南省', '广东省', '广西壮族自治区', '海南省', '四川省', '贵州省', '云南省', '西藏自治区', '陕西省', '甘肃省', '青海省', '宁夏回族自治区', '新疆维吾尔自治区'];

    var content = INIT_PROVINCE_CONTENT;

    // 直辖市
    for (var c = 0, cl = centralCity.length-3; c < cl; c++) {
        content +=  '<option value="city|' + centralCity[c].code + '">' + centralCity[c].name + '</option>';
    }

    // 省,自治区
    for (var i = 0, l = provinceList.length; i < l; i++) {
        content += '<option value="province">'+provinceList[i]+'</option>';
    }

    // 行政区,台湾
    for (var cc = centralCity.length-3, ccl = centralCity.length; cc < ccl; cc++) {
        content +=  '<option value="city|' + centralCity[cc].code + '">' + centralCity[cc].name + '</option>';
    }

    $('#province').html(content);


    // -- 开启地图服务 --

    AMap.service(["AMap.DistrictSearch"], function() {
        var opts = {
            subdistrict: 1,   //返回下一级行政区
            extensions: 'all',  //返回行政区边界坐标组等具体信息
            level:'city'  //查询行政级别为 市
        };

        // 实例化DistrictSearch
        district = new AMap.DistrictSearch(opts);
    });

    function updateAndFetch(cb) {
        // 选中的范围
        var selectProvince = $('#province').find("option:selected");
        var selectCity = $('#city').find("option:selected");
        var selectDistrict = $('#district').find("option:selected");

        // 范围初始值
        var trimProvince = INIT_PROVINCE_CONTENT.replace(/<option>(.*?)<\/option>/g,"$1");
        var trimCity = INIT_CITY_CONTENT.replace(/<option>(.*?)<\/option>/g,"$1");
        var trimDistrict = INIT_DISTRICT_CONTENT.replace(/<option>(.*?)<\/option>/g,"$1");

        // 是否仅有轮廓
        var isOnlyOutline = $("input[name='type']:checked").val() == 'outline' ? true : false;

        // 是否需要压缩
        var isCompressed = $("#isCompressed").is(':checked');

        // 地图范围等级: 3-中国, 2-省(直辖市,行政区) 1-市, 0-地区
        var getType = 0;

        // 直辖市或行政区
        if (isAomenOrHK || isCentralCity) {
            if (selectDistrict.text() == trimDistrict) {
                getType = 2;
            } else {
                getType = 0;
            }

        // 普通省市
        } else {
            if (selectProvince.text() == trimProvince) {
                getType++;
            }

            if (selectCity.text() == trimCity) {
                getType++;
            }

            if (selectDistrict.text() == trimDistrict) {
                getType++;
            }
        }
        switch (getType) {
            case 3:
            fileStr = '中国';
            fetchGeoJson('中国', isOnlyOutline, isCompressed, cb);
            getType = 0;
            break;
            case 2:
            fileStr = selectProvince.text();
            fetchGeoJson(selectProvince, isOnlyOutline, isCompressed, cb);
            getType = 0;
            break;
            case 1:
            fileStr = selectCity.text();
            fetchGeoJson(selectCity, isOnlyOutline, isCompressed, cb);
            getType = 0;
            break;
            case 0:
            fileStr = selectDistrict.text();
            fetchGeoJson(selectDistrict, true, isCompressed, cb);
            getType = 0;
            break;
            default:
            getType = 0;
            alert('请选择正确的地图范围');
        }
    }


    // -- dom事件绑定 --

    $('#type input').change(function () {

        // 更新预览
        updateAndFetch(preview);
    });

    // 绑定生成按钮点击事件，触发生成地图数据并下载
    $('#buildJson').click(downloadJson);
    $('#buildJs').click(downloadJs);

    function downloadJson() {
        if (INIT_PROVINCE_CONTENT.indexOf($('#province').val()) > -1) {
            return;
        }
        updateAndFetch(function (geoJson) {
            downloadGeoJson(geoJson);
        });
    }

    function downloadJs() {
        if (INIT_PROVINCE_CONTENT.indexOf($('#province').val()) > -1) {
            return;
        }
        updateAndFetch(function (geoJson) {
            downloadGeoJs(geoJson, $('#mapName').val());
        });
    }

    // 监听省级下拉列表变化
    $('#province').change(provinceSelectCallback);
    function provinceSelectCallback() {

        $('#city').removeAttr("disabled");
        $('#district').removeAttr("disabled");
        $('#outlineAndPartition').removeAttr("disabled");

        var arrTemp = $(this).val().split('|');
        // 行政级别
        var level = arrTemp[0];
        // 城市编码
        citycode = arrTemp[1];
        // 关键字
        var keyword = $(this).find("option:selected").text();

        // 判断是否是直辖市
        isCentralCity = isSpecialCity(keyword, CENTRAL_CITIES);

        // 判断是否是香港澳门
        isAomenOrHK = isSpecialCity(keyword, AOMEN_AND_HK);

        // 判断是否是台湾
        isTaiwan = isSpecialCity(keyword, TAIWAN);

        // 直辖市和行政区时，禁用市级下拉列表
        if (isAomenOrHK || isCentralCity) {
            $('#city').html(INIT_CITY_CONTENT);
            $('#city').prop("disabled", true);
        }

        // 直辖市的县级内容为初始状态
        if (isCentralCity) {
            $('#district').html(INIT_DISTRICT_CONTENT);
        }

        // 台湾时，禁用市级，县级下拉列表，只能选择外部轮廓
        if (isTaiwan) {
            $('#city').html(INIT_CITY_CONTENT);
            $('#city').prop("disabled", true);
            $('#district').html(INIT_DISTRICT_CONTENT);
            $('#district').prop("disabled", true);
            $('#outline').prop("checked", true);
            $('#outlineAndPartition').prop("disabled", true);
        }

        var trimProvince = INIT_PROVINCE_CONTENT.replace(/<option>(.*?)<\/option>/g,"$1");

        // 若省级下拉列表为初始化状态，那么设置市级，区级下拉列表也为初始状态
        if (keyword == trimProvince) {
            $('#city').html(INIT_CITY_CONTENT);
            $('#district').html(INIT_DISTRICT_CONTENT);

        } else {
            // 行政区级别
            district.setLevel(level);
            // 行政区查询
            district.search(keyword, function(status, result){
                getData(result);
            });
        }

        // 更新预览
        updateAndFetch(preview);
    }

    // 监听市级下拉列表变化
    $('#city').change(citySelectCallback);
    function citySelectCallback() {

        $('#outlineAndPartition').removeAttr("disabled");

        // 中国共有五个不设市辖区的地级市
        var keyword = $(this).find("option:selected").text();
        isNoCounty = isSpecialCity(keyword, NO_COUNTY);

        // 没有市辖区的地级市，对他们只能选择外部轮廓
        if (isNoCounty) {
            $('#outline').prop("checked", true);
            $('#outlineAndPartition').prop("disabled", true);
        }

        // $('#city').removeAttr("disabled");
        // $('#district').removeAttr("disabled");
        // $('#outlineAndPartition').removeAttr("disabled");

        var arrTemp = $(this).val().split('|');

        //行政级别
        var level = arrTemp[0];

        // 城市编码
        citycode = arrTemp[1];

        var keyword = $(this).find("option:selected").text();
        var trimCity = INIT_CITY_CONTENT.replace(/<option>(.*?)<\/option>/g,"$1");

        if (keyword == trimCity) {
            $('#district').html(INIT_DISTRICT_CONTENT);
        } else {
            //行政区级别
            district.setLevel(level);
            //行政区查询
            district.search(keyword, function(status, result){
                getData(result);
            });
        }

        // 更新预览
        updateAndFetch(preview);
    }

    // 监听区县级下拉列表变化
    $('#district').change(districtSelectCallback);
    function districtSelectCallback() {

        $('#outline').prop("checked", true);
        $('#outlineAndPartition').prop("disabled", true);

        var trimDistrict = INIT_DISTRICT_CONTENT.replace(/<option>(.*?)<\/option>/g,"$1");


        var arrTemp = $(this).val().split('|');

        //行政级别
        var level = arrTemp[0];
        // 城市编码
        citycode = arrTemp[1];

        var keyword = $(this).find("option:selected").text();
        if (keyword == trimDistrict) {
            $('#outlineAndPartition').removeAttr('disabled');
        }


        //行政区级别
        district.setLevel(level);
        //行政区查询
        district.search(keyword, function(status, result){
            getData(result);
        });

        // 更新预览
        updateAndFetch(preview);
    }

    // 判断直辖市,行政区
    function isSpecialCity(cityName, list) {
        var isSpecial = false;
        for (var c = 0; c < list.length; c++) {
            if (cityName == list[c]) {
                isSpecial = true;
                return isSpecial;
            }
        }
        return isSpecial;
    }


    // 动态加载下拉列表
    function getData(e) {
        var list = e.districtList || [],
        subList =[], level, nextLevel;

        if(list.length >= 1) {
            subList = list[0].districtList;
            level = list[0].level;

            // 清空下一级别的下拉列表
            if (level === 'province') {
                nextLevel = 'city';
                $('#city').html(INIT_CITY_CONTENT);
                $('#district').html(INIT_DISTRICT_CONTENT);
            }
            else if (level === 'city') {
                nextLevel = 'district';
                $('#district').html(INIT_DISTRICT_CONTENT);
            }
            else if (level === 'district') {
                nextLevel = 'biz_area';
            }

            if(subList){
                if (subList[0].level == 'city') {
                    initContent = INIT_CITY_CONTENT;
                } else {
                    initContent = INIT_DISTRICT_CONTENT;
                }
                var contentSub = initContent;

                for(var i=0,l=subList.length; i<l; i++){
                    var name = subList[i].name;
                    var levelSub = subList[i].level;
                    var cityCode = subList[i].citycode;
                    contentSub += '<option value="'+levelSub+'|'+cityCode+'">'+name+'</option>';
                }
                $('#'+levelSub).html(contentSub);
            }
        }
    }

    var myChart;
    function preview(data) {
        if (myChart) {
            myChart.dispose();
        }
        if (! data) {
            document.getElementById('preview-viewport').innerHTML = '无数据';
            return;
        }
        myChart = echarts.init(document.getElementById('preview-viewport'));
        echarts.util.mapData.params.params.preview = {
            getGeoJson: function (callback) {
                callback(echarts.util.mapData.params.decode(data));
            }
        };
        myChart.setOption({
            series : [
                {
                    name:'预览',
                    type:'map',
                    mapType: 'preview',
                    data:[],
                    roam: true,
                    itemStyle: {
                        normal: {
                            borderColor: '#999',
                            color: '#f3f3f3'
                        },
                        emphasis: {
                            borderColor: '#888',
                            color: '#7bb4e5'
                        }
                    }
                }
            ]
        });
    }

    // //
    // function search(obj) {

    //     var option = obj[obj.options.selectedIndex];
    //     var arrTemp = option.value.split('|');

    //     var level = arrTemp[0];//行政级别
    //     citycode = arrTemp[1];// 城市编码
    //     var keyword = option.text; //关键字

    //     district.setLevel(level); //行政区级别
    //     //行政区查询
    //     district.search(keyword, function(status, result){
    //         getData(result);
    //     });
    // }

    </script-->

</body>
<body>
